<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <a-button @click="add" type="primary">
            <a-icon type="plus-circle" />添加序列号组
          </a-button>
        </el-button-group>
        <a-drawer
          :title="title+'序列号组'"
          placement="right"
          :closable="false"
          @close="visible = false"
          :visible="visible"
          width="450"
        >
          <el-form
            :model="secretfile"
            ref="secretfile"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="名称" prop="name">
              <el-input v-model="secretfile.name"></el-input>
            </el-form-item>
            <el-form-item label="介绍" prop="info">
              <el-input v-model="secretfile.info"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="time">
              <a-range-picker @change="onChange" />
            </el-form-item>
            <el-form-item label="提交">
              <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
          </el-form>
        </a-drawer>
        <el-dialog title="修改文件" :visible.sync="dialogupdata">
          <el-form ref="secretfile" :model="secretfile" label-width="80px">
            <el-form-item label="名称">
              <el-input v-model="secretfile.name"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
              <el-input v-model="secretfile.info"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogupdata = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit(secretfile)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" :data="tableDate" style="width: 100%">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="info" label="介绍"></el-table-column>
        <el-table-column prop="updated_at" label="时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-text="gettime(scope.row.updated_at)"></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button type="text">
              <router-link :to="{ name: '序列号课程', query:{ID: scope.row.ID} }">序列号课程</router-link>
            </el-button>
            <el-button type="text">
              <router-link :to="{ name: '序列号', query:{ID: scope.row.ID} }">序列号</router-link>
            </el-button>
            <el-button @click="upRow(scope.row)" type="text">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: file}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
// import OSS from "ali-oss";
// import uuid from "uuid/v4";
import { gettime } from "../../../plugins/utils";
import {
  asynccreatepasswordgroup,
  asyncgetpasswordgroup,
  asyncupdatepasswordgroup
} from "@/plugins/api.js";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";

export default {
  name: "Serialgroup",
  data() {
    return {
      loading3: false,
      pagesize: 10,
      currentPage: 1,
      secretfile: {
        name: "",
        info: ""
      },
      visible: false,
      file: [],
      rules: {
        fileurl: [
          { required: true, message: "文件地址不能为空", trigger: "blur" }
        ]
      },
      dialogupdata: false,
      title: "添加"
    };
  },
  computed: {
    tableDate() {
      const { file, search, currentPage, pagesize } = this;
      const data = file.filter(
        data =>
          !search || data.name.toLowerCase().includes(search.toLowerCase())
      );
      return data.slice((currentPage - 1) * pagesize, currentPage * pagesize);
    }
  },
  async mounted() {
    await this.start();
  },
  methods: {
    gettime,
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async start() {
      this.file = await asyncgetpasswordgroup();
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    async onSubmit(item) {
      try {
        console.log(item.name);
        await asyncupdatepasswordgroup({
          ID: item.ID,
          name: item.name,
          info: item.info
        });
        this.start();
        this.$message({
          message: "恭喜你，修改成功",
          type: "success"
        });
        this.dialogupdata = false;
      } catch (err) {
        this.$message.error("错了哦，修改失败:" + err);
      }
    },
    async submit() {
      if (this.secretfile.name === "" || this.secretfile.info == "") {
        this.$message({
          type: "error",
          message: `请填写完整信息!`
        });
        return;
      } else {
        try {
          await asynccreatepasswordgroup({
            name: this.secretfile.name,
            info: this.secretfile.info
          });
          this.start();
          this.visible = false;
          this.$message({
            type: "success",
            message: `${this.title}成功!`
          });
        } catch (err) {
          this.$message({
            type: "error",
            message: `${this.title}失败!`
          });
        }
      }
    },
    add() {
      this.secretfile = {
        name: "",
        Introduction: ""
        // time: ""
      };
      this.visible = true;
      this.title = "添加";
    },
    upRow(index) {
      this.secretfile = index;
      this.dialogupdata = true;
    }
  },
  components: {
    adminContentFooter
  }
};
</script>
